import React from 'react'
import { Form, Select, Input, Button } from 'antd'
import PropTypes from 'prop-types'
const FormItem = Form.Item
const Option = Select.Option
class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        store_status:[
            {value:1, name: '开业'},
            {value:0, name: '未开业'}
        ]
    }
    componentDidMount () {
    }
    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            let newValue = {}
            for (let k in values) {
                if (typeof values[k] === 'string') {
                    newValue[k] = values[k].replace(/^\s+|\s+$/g,"")
                } else {
                    newValue[k] = values[k]
                }
            }
            this.props.doSearch(newValue)
        });
    }
    handleReset = () => {
        this.props.form.resetFields()
        this.props.doSearch({clear: true})
    }
    render () {
        const { getFieldDecorator } = this.props.form
        return <Form
            layout="inline"
            className="supplier-filter"
            onSubmit={this.handleSearch}
        >
            <FormItem
                label="门店ID"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('store_id', {
                })(
                    <Input placeholder="请输入门店ID" />
                )}
            </FormItem>
            <FormItem
                label="门店名称"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('store_name', {
                })(
                    <Input placeholder="请输入门店名称" />
                )}
            </FormItem>
            <FormItem
                label="归属商家"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('name', {
                })(
                    <Input placeholder="请输入归属商家" />
                )}
            </FormItem>
            <FormItem className="filter-select">
                <span className="title">开业状态: </span>
                {getFieldDecorator('store_status')(
                    <Select allowClear style={{ width: 194 }} placeholder="选择状态">
                        {this.state.store_status.map(v =>  <Option key={v.value} value={v.value}>{v.name}</Option>)}
                    </Select>
                )}
            </FormItem>
            <FormItem
                label="联系人"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('contact', {
                })(
                    <Input placeholder="请输入联系人" />
                )}
            </FormItem>
            <FormItem
                label="联系电话"
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('shop_tel', {
                })(
                    <Input placeholder="请输入联系电话" />
                )}
            </FormItem>
            <Button type="primary" htmlType="submit" style={{marginRight: 10}} >查询</Button>
            <FormItem className="filter-select">
                <a onClick={this.handleReset}>清除条件</a>
            </FormItem>
        </Form>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
